<template>
  <view class="wrapper" @tap.stop="navToDetail(info)">
    <view class="wrap-box">
      <view class="square-wrap">
        <view class="square-box">
          <fu-image :src="info.thumb" mode="aspectFill" ></fu-image>
        </view>
      </view>
      <view class="content">
        <view class="text-df text-333 text-cut-2" >
          <block v-if='info.goods_label'>
            <text  class="item-goods-label" v-for='(item,index) in info.goods_label' :key="index">
              {{item}}
            </text>
          </block>
          {{info.name}}
        </view>
        <view class="fu-cred margin-top-sm flex ">
          <view >
            <text class="text-lg text-bold margin-right-xs"> {{ info.sales_integral }}</text>
            <text class="text-sm "> {{i18n['积分']}}</text>
          </view>
          <view v-if="info.is_pure_integral!=1" >
            <text class="padding-left-xs padding-right-xs">+</text>
            <text class="text-lg text-bold margin-right-xs  text-price"> {{info.activity_price}}</text>
          </view>
        </view>
        <view  class="round cu-btn buttons  bg-theme text-white"> {{i18n['立即兑换']}} </view>

      </view>
    </view>
  </view>
</template>

<script>
import fuImage from '../../../../components/fu-image/fu-image';
  /**
   * is_pure_integral  判断是否为纯积分兑换
   * 1：为纯积分兑换
   * 0：为积分+钱 兑换
   */
  export default {
    props: {
      info: {
        type: Object
      },
    },
    components: {fuImage},
    methods: {
      navToDetail(item) {
        this.$emit('navToDetail',item)
      },

    },
  }
</script>

<style lang="scss" scoped>
  .wrapper {
    overflow: hidden;
    margin-bottom: 20rpx;
    padding: 0 10rpx;
    box-sizing: border-box;
    .wrap-box {
      background-color: #FFFFFF;
      border-radius: 24rpx;
      .square-wrap {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        box-sizing: border-box;
        position: relative;

        .square-box {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          border-radius: 24rpx 24rpx 0 0;

          image {
            width: 100%;
            height: 100%;
            border-radius: 24rpx 24rpx 0 0;
          }
        }

      }
      .image{
        width: 100%;
        border-radius: 24rpx 24rpx 0 0;
      }
    }

    .content {
      padding: 20rpx;
    }
  }
  .buttons{
    font-size: 24rpx;
    letter-spacing: 3rpx;
    width: 100%;
    margin-top:10rpx;
    height:60rpx;
    line-height:60rpx;

    background: $bgtheme ;
  }

  .text-cut-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }



  .text-333 {
    color: #333333;
  }

  .text-999 {
    color: #999999;
  }

  .name-title {
    position: relative;
  }

  .name-title-label {
    float: left;
  }

  .item-goods-label {
    background: $bgtheme;
    padding: 2rpx 5rpx;
    color: #ffffff;
    font-size: 24rpx;
    border-radius: 6rpx;
    margin-right: 9rpx;
  }
  .item-activity-label {
    padding: 2rpx 5rpx;
    /* margin: 5rpx; */
    font-size: 24rpx;
    border-radius: 6rpx;
    border: 1px solid;
    margin: 0rpx 1px 0px;
    display: inline-block;
    transform:scale(.8)
  }
</style>
